<template>
	<div class="hy-container">
		<HyTable
			:searchFields="searchFields"
			:searchConfig="searchConfig"
			:searchDefault="searchDefault"
			:tableConfig="tableConfig"
			:tableColumns="tableColumns"
			@sendSearchData="getSearchData"
			ref="hyTableRef"
		>
			<template #tableHeader>
				<el-button type="primary" @click="handleOperate('add')" icon="Plus">添加三张清单</el-button>
				<el-button @click="handleOperate('export')" icon="download">导出</el-button>
			</template>
			<template #statusSlot="{ row }">
				<el-tag :class="setColor(row.threeListStatus)">{{ row.threeListStatusName }}</el-tag>
			</template>
			<template #operation>
				<el-table-column fixed="right" label="操作" width="130">
					<template #default="{ row }">
						<div class="flex items-center w-full justify-between">
							<el-button text type="primary" icon="View" @click="handleOperate('view', row)">详情</el-button>
							<el-dropdown style="color: var(--el-color-primary)" v-if="showMore(row)">
								<span class="el-dropdown-link">
									更多
									<el-icon class="el-icon--right">
										<arrow-down color="var(--el-color-primary)" />
									</el-icon>
								</span>
								<template #dropdown>
									<el-dropdown-menu>
										<el-dropdown-item
											style="color: var(--el-color-primary)"
											:icon="Document"
											@click="handleOperate('declare', row)"
											v-if="row.threeListStatus === '1' || row.threeListStatus === '6'"
											>申报</el-dropdown-item
										>
										<el-dropdown-item
											v-if="row.threeListStatus === '1' || row.threeListStatus === '6'"
											style="color: #52c41a"
											:icon="Edit"
											@click="handleOperate('edit', row)"
											>编辑</el-dropdown-item
										>
										<el-dropdown-item
											style="color: #f74e56"
											:icon="Delete"
											v-if="row.threeListStatus === '1' || row.threeListStatus === '6'"
											@click="handleOperate('delete', row)"
											>删除</el-dropdown-item
										>
										<el-dropdown-item v-if="row.isNotHistoryVersion" style="color: #13c2c2" :icon="Reading" @click="handleOperate('records', row)"
											>历史版本</el-dropdown-item
										>
										<el-dropdown-item v-if="row.isCancel" style="color: #f5222d" :icon="Close" @click="handleOperate('cancel', row)"
											>撤销</el-dropdown-item
										>
										<el-dropdown-item v-if="row.threeListStatus === '2'" style="color: #a593e0" :icon="Edit" @click="handleOperate('view', row)"
											>修改申请</el-dropdown-item
										>
										<el-dropdown-item v-if="row.threeListStatus === '4'" style="color: #a593e0" :icon="Edit" @click="handleOperate('declare', row)"
											>修改</el-dropdown-item
										>
									</el-dropdown-menu>
								</template>
							</el-dropdown>
						</div>
					</template>
				</el-table-column>
			</template>
		</HyTable>
		<ChooseRecords :businessType="'1'" :visible="visible" :businessKey="businessKey" @close="visible = false" />
	</div>
</template>

<script lang="ts" setup>
import HyTable from '/@/components/HyTable/index.vue';
import { ArrowDown, Document, Edit, Delete, Reading, Close } from '@element-plus/icons-vue';
import { threeListPageApi } from '/@/api/threeList/declare';
import { useDict } from '/@/hooks/dict';
import ChooseRecords from './components/ChooseRecords/index.vue';
import other from '/@/utils/other';
import { useOperate } from './hooks/useOperate';
const { three_list_status } = useDict('three_list_status');
const tableColumns = computed(() => {
	const { columns } = useOperate();
	let newColumns = [...columns, { prop: 'threeListStatusName', label: '状态', slot: 'statusSlot', width: 160, fixed: 'right' }];
	return newColumns;
});
const tableConfig = computed(() => {
	return {
		request: threeListPageApi,
	};
});
// 配置搜索
const searchFields = computed(() => {
	return {
		keyWords: {
			type: 'input',
			label: '关键字',
		},
		threeListStatus: {
			type: 'select',
			label: '状态',
			options: three_list_status.value,
		},

		timeArray: {
			type: 'date',
			span: 7,
			picker: 'datetimerange',
			label: '申报时间',
		},
	};
});
const searchConfig = computed(() => {
	return {
		labelWidth: '120px',
		type: 'search',
		title: '三张清单申报',
		show: true,
	};
});
const searchDefault = ref({});
//操作
const hyTableRef = ref();
const businessKey = ref();
const visible = ref(false);
const handleOperate = (
	operateType: string,
	row = {
		threeListId: '',
		processInstanceId: '',
	}
) => {
	const { threeListId, processInstanceId } = row;
	const { routerGo, handleDelete } = useOperate({ threeListId, processInstanceId });
	switch (operateType) {
		//页面跳转
		case 'add':
		case 'edit':
		case 'view':
		case 'declare':
			routerGo(operateType);
			break;
		//删除
		case 'delete':
			handleDelete(hyTableRef.value.getTableData);
			break;
		//历史版本
		case 'records':
			visible.value = true;
			nextTick(() => {
				businessKey.value = row.threeListId;
			});
			break;
		//导出
		case 'export':
			other.downBlobFile('/manage/threeList/exportInfo', { ...exportParams.value }, `三张清单列表.xlsx`);
			break;
		//撤销
		case 'cancel':
			const { handleCancel } = useOperate({ threeListId, processInstanceId });
			handleCancel(hyTableRef.value.getTableData);
			break;
		default:
			break;
	}
};
//获取搜索数据
const exportParams: any = ref();
const getSearchData = (data: any) => {
	exportParams.value = data;
};
//是否展示更多
const showMore = (row: any) => {
	if (row.threeListStatus === '3' && !row.isNotHistoryVersion) {
		return false;
	}
	if (row.threeListStatus === '5' && !row.isNotHistoryVersion) {
		return false;
	}
	return true;
};
//设置颜色
const setColor = (type: string) => {
	switch (type) {
		case '1':
			return 'start-tag';
		case '2':
		case '3':
			return 'wait-tag';
		case '4':
			return 'edit-tag';
		case '5':
			return 'agree-tag';
		case '6':
			return 'refuse-tag';
		default:
			break;
	}
};
</script>
<style scoped lang="scss"></style>
